<template>
  <div>
    <!-- 客户统计数据-新老客户人数对比 -->
    <div class="comparison" ref='comparison'></div>
  </div>
</template>

<script>
/**
 *       contrastPeople: { // 新老客户人数比
 *         config: {},
 *         dataList: [
 *           { value: 353, name: '新客户', color: '#4168e7' },
 *           { value: 205, name: '老客户', color: '#14d8cb' }
 *         ]
 *       },
 */
import 'echarts/map/js/china.js'
export default {
  name: 'comparison',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {}
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    dataList: {
      deep: true,
      handler (newVal, oldVal) {
        this.handlerComparison(this.documentId) // 客户统计数据-新老客户人数对比
      }
    }
  },
  mounted () {
    this.$nextTick(_ => {
      if(this.documentId){
        this.handlerComparison(this.documentId) // 客户统计数据-新老客户人数对比
      }
    })
  },
  created () {
  },
  methods: {
    // 客户统计数据-新老客户人数，金额对比
    handlerComparison (documentId) {
      const config = this.config
      const dataList = [...this.dataList]
      const legendData = []
      const colorArr = []
      const seriesArr = []
      dataList.forEach((item, index) => {
        colorArr.push(item.color)
        legendData.push(item.name)
      })
      const docId = document.getElementById(documentId)
      const comparison = this.$echarts.init(docId.getElementsByClassName('comparison')[0])
      // var comparison = this.$echarts.init(document.getElementById(documentId))
      comparison.setOption({
        title: { text: '' },
        tooltip: {
          trigger: 'item',
          axisPointer: { type: 'shadow' },
          textStyle: { color: '#12aca3', fontSize: 24 }, // 设置文字颜色、字号
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#ffffff', // 设置背景颜色
          borderRadius: '50',
          formatter: function (params, ticket, callback) {
            // console.log(params)
            return `<div style='width:90px;height:90px;display:flex; justify-content: center;align-items: center;'> ${Number(params.percent).toFixed(2)}%</div>`
          }
        },
        legend: {
          itemWidth: 10,
          itemHeight: 10,
          icon: 'circle',
          x: 'right',
          y: 'center',
          orient: 'vertical', // 设置图例排列纵向显示
          align: 'left', // 设置图例中文字位置在icon标识符的右侧
          left: '80%',
          top: '40%',
          data: legendData,
          itemGap: 10, // 设置图例之间的间距
          padding: [0, 0, 0, 0], // 设置图例与圆环图之间的间距
          textStyle: {
            // 文字样式
            color: '#333333',
            fontSize: '12'
          },
          formatter: function (name) { // 添加这个方法后必须要return 参数 才会显示值
            var value
            dataList.forEach((item) => {
              if (item.name === name) {
                value = item.value
              }
            })
            // return `${name}：${value}人`
            return `${name}：${value}`
          }
        },
        color: colorArr,
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            roseType: 'radius',
            avoidLabelOverlap: false,
            label: { show: false, position: 'center' },
            labelLine: { show: false },
            data: dataList
          }
        ]
      })
      window.addEventListener('resize', function () {
        comparison.resize()
      })
    }
  }
}
</script>
<style scoped lang="scss">
.comparison{
  width: 100%;
  height: 400px;
}
</style>
